<template>
  <v-app id="inspire">
    <!--侧边栏-->
    <v-navigation-drawer
        v-model="drawer"
        app
        expand-on-hover
    >
        <v-list
            height="60px"
            class="pa-0 ma-0"
        >
          <v-list-item  @click="$router.push('/personal')">
            <v-list-item-avatar class="mr-6" size="34">
              <v-img :src=avatarUrl></v-img>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title class="text-h8">
                {{minUser.fullName}}
              </v-list-item-title>
              <v-list-item-subtitle>{{minUser.username}}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      <v-divider></v-divider>
      <v-list nav>
        <v-list-item-group v-model="selectedItem" color="primary">
          <template v-for="item in menuData">
            <v-list-item v-if="item.children.length===0" @click="$router.push(item.path)">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="item.title"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-group v-if="item.children.length!==0" :prepend-icon="item.icon" no-action>
              <template v-slot:activator>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </template>
              <v-list-item v-for="c in item.children" color="primary">
                <v-list-item-content @click="$router.push(c.path)">
                  <v-list-item-title v-text="c.title"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
          </template>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <!--顶部 -->
    <v-app-bar app color="#FFFFFF" elevation="2" height="60px">
      <div class="ml-5">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
              v-for="(item,index) in breadcrumb"
              :key="index"
              :to="{path:item.path}"
          >{{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <v-spacer></v-spacer>
      <!--通知-->
      <v-menu
          :close-on-content-click=false
          bottom
          max-width="400px"
          offset-y
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
              v-bind="attrs"
              v-on="on"
              icon
          >
            <v-badge
                bordered
                color="red"
                dot
            >
              <v-icon>mdi-bell-ring-outline</v-icon>
            </v-badge>
          </v-btn>
        </template>
        <v-tabs
            class="msg_tabs"
        >
          <v-tab
              v-for="item in items2"
              :key="item"
          >
            {{ item }}
          </v-tab>
          <v-menu
              :nudge-left="100"
              :nudge-top="20"
              bottom
              offset-y
          >
            <v-list>
              <v-list-item
                  v-for="item in setMsg"
                  :key="item"
                  @click="() => {}"
              >
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>

          <v-tab-item
          >
          </v-tab-item>
          <v-tab-item>
          </v-tab-item>
        </v-tabs>
      </v-menu>
      <v-btn
          icon
      >
        <v-icon class="mr-3 ml-4" @click="logout">mdi-exit-to-app</v-icon>
      </v-btn>
    </v-app-bar>
    <!--内容框-->
    <v-main class="bg_main">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </v-main>
  </v-app>
</template>

<script>
import {getMinUserInfo, getNavList} from "../network/Details/home";

export default {
  name: "Home",
  data() {
    return {
      breadcrumb: [
        {
          meta: {title: '首页'}
        }
      ],
      selectedItem: 0,
      drawer: null,
      avatarUrl: '',
          menuData: [],
      //通知
      items2: [
        '未读通知', '已读通知',
      ],
      setMsg: ['全部已读', '全部删除'],
      //通知内容
      readMsg: [

      ],
      minUser:{}
    }
  },
  created() {
   if(this.selectedItem != 0){
     let selectedI = window.sessionStorage.getItem("selectedItem")
     this.selectedItem = selectedI
   }
    getNavList().then(res => {
      if(res.code === 200){
        this.menuData = res.data;
      }
    })
    const _this = this;
    getMinUserInfo().then(res => {
      if(res.code === 200){
        this.minUser = res.data;
        this.avatarUrl = _this.$store.state.ossBaseUrl + res.data.avatar
        window.sessionStorage.setItem("avatar",_this.minUser.avatar)
        window.sessionStorage.setItem("roleId", _this.minUser.roleId)
        this.$store.state.userInfo = res.data;
      }
    })
    if(this.$ws.ws == null){
      this.$ws.connect(this)
    }
  },
  methods:{
    getRoute() {
      this.breadcrumb = this.$route.matched.filter((item) => {
        return item.meta;
      });
    },
    logout(){
      window.sessionStorage.removeItem('token');
      this.$router.replace('/login');
    },
  },
  watch: {
    $route() {
      this.getRoute();
    },
  },
  computed: {

  },
  updated() {
    window.sessionStorage.setItem("selectedItem",this.selectedItem)
  }
}
</script>

<style lang="less" scoped>
.bg_main {
  background-color: #F5F7F9;
}

.search_text {
  width: 300px;
}

.card_title {
  font-size: 16px;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
}

.msg_tabs {
  position: relative;

  .msg_icon {
    position: absolute;
    right: 6%;
    top: 20%;
  }
}
</style>
